import React from "react";
// import "./03-class.css";

// 引入classnames
import classNames from "classnames/bind";
import styles from "./03-class.css";

// 调用bind方法，可以得到cx函数
let cx = classNames.bind(styles);

const done = false;

// 使用短路运算符和三目运算(三元表达式)就能通过不同的条件添加不同的样式
// 可以处理大多数的情况

// 如果情况相对复杂的时候，单一的表达式就不能解决问题了
// 需要使用classnames来解决
const App = () => {
  let className = cx({
    // 左边是类名，右边是变量或者表达式
    // 右边的表达式可以通过state或者props等来定义
    box: done,
    weight: 2 > 1,
    // weight: props.count > 10 && props.count < 20,
  });

  return (
    <>
      <h2>通过不同的条件添加不同的样式</h2>
      {/* <div className={done && "box"}>hello react!!</div> */}
      {/* <div className={done ? "box" : "box2"}>hello react!!</div> */}

      <div className={className}>hello react!!</div>
    </>
  );
};

export default App;
